<template>
  <div class="container">
    <div class="app-container">
      <div class="left">
        <el-input
          v-model="queryParams.keyword"
          style="margin-bottom:10px"
          type="text"
          prefix-icon="el-icon-search"
          size="small"
          placeholder="输入员工姓名全员搜索"
          @input="search"
        />
        <!-- 树形组件 -->
        <!--
          @current-change="handleCurrentChange"
          当前选中节点变化时触发的事件

          setCurrentKey方法必须配合node-key属性
          设置成数据中唯一标识的字段名
        -->
        <el-tree
          ref="tree"
          :data="depts"
          node-key="id"
          :props="{label:'name'}"
          default-expand-all
          highlight-current
          :expand-on-click-node="false"
          @current-change="handleCurrentChange"
        />
      </div>

      <div class="right">
        <el-row class="opeate-tools" type="flex" justify="end">
          <el-button size="mini" type="primary">添加员工</el-button>

          <el-button size="mini" @click="showExcelDialog = true">excel导入</el-button>

          <el-button size="mini" @click="exportExcel">excel导出</el-button>

        </el-row>

        <!-- 表格组件 -->
        <el-table :data="list">
          <el-table-column label="头像" prop="staffPhoto">
            <!-- 提供默认插槽 -->
            <!-- <span>123</span>
            <img src="" alt=""> -->
            <template #default="obj">
              <!-- <span>{{ obj.row.staffPhoto }}</span> -->
              <img v-if="obj.row.staffPhoto" :src="obj.row.staffPhoto" alt="" style="width: 60px;height: 60px;border-radius: 50%;display: block;">
              <div v-else class="pic">{{ obj.row.username.slice(2,3) }}</div>
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="手机号" sortable prop="mobile" />
          <el-table-column label="工号" sortable prop="workNumber" />
          <el-table-column label="聘用形式" prop="formOfEmployment">
            <template #default="{row}">
              <span>{{ row.formOfEmployment == 1 ? '正式': '非正式' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间" sortable prop="timeOfEntry" />
          <el-table-column label="操作" width="280px">
            <template #default="{row}">
              <!--
                功能权限控制策略:
                1.能看能点但是不给功能 给提示
                2.看不到
                3.能看不能点
              -->
              <el-button v-permission="'WATCH_EMPLOYEE'" size="mini" type="text" @click="watch(row.id)">查看</el-button>
              <!-- <el-button v-if="$store.state.user.userInfo.roles.points.includes('WATCH_EMPLOYEE')" size="mini" type="text" @click="watch(row.id)">查看</el-button> -->
              <!-- <el-button :disabled="!$store.state.user.userInfo.roles.points.includes('WATCH_EMPLOYEE')" size="mini" type="text" @click="watch(row.id)">查看</el-button> -->

              <el-button v-permission="'XXX'" size="mini" type="text">角色</el-button>
              <!-- <el-button v-if="$store.state.user.userInfo.roles.points.includes('XXX')" size="mini" type="text">角色</el-button> -->

              <!-- 控制一下删除的权限 -->
              <!-- 这里的判断标识一定要和后端统一  配合好 不是随便写的   后端返回什么 你就用这个判断 -->
              <el-button v-permission="'DEL_EMPLOYEE'" size="mini" type="text">删除</el-button>

              <!-- 利用自定义指令 实现权限控制 -->
            </template>

          </el-table-column>

        </el-table>

        <!-- 分页 -->
        <el-row style="height: 60px" align="middle" type="flex" justify="end">
          <el-pagination
            layout="total,prev, pager, next"
            :total="total"
            :current-page="queryParams.page"
            :page-size="queryParams.pagesize"
            @current-change="handleCurrentChange2"
          />
        </el-row>
      </div>

      <!-- 导入的弹层 -->
      <!-- <ImportExcel
        :show-excel-dialog="showExcelDialog"
        @update:showExcelDialog="showExcelDialog=$event"
      /> -->
      <ImportExcel
        :show-excel-dialog.sync="showExcelDialog"
        @refresh="getEmployeeList"
      />

    </div>

  </div>

</template>

<script>
import { getDepartment } from '@/api/department'
import { exportEmployee, getEmployeeList } from '@/api/employee'
import { transformListToTree } from '@/utils'
import FileSaver from 'file-saver'
import ImportExcel from './components/import-excel.vue'

export default {
  name: 'Employee',
  components: {
    ImportExcel
  },
  data() {
    return {
      depts: [
        // {
        //   name: '研发部',
        //   children: [
        //     { name: '开发部' }
        //   ]
        // },
        // {
        //   name: '销售部'
        // }
      ],
      showExcelDialog: false,
      // 影响右侧员工列表数据展示的筛选条件
      // 传给后端 得到指定数据
      queryParams: {
        keyword: '', // 输入关键字存下来
        departmentId: '', // 选择部门需要存下来id
        page: 1,
        pagesize: 10
      },
      list: [], // 右边表格  员工列表
      total: 0 // 总数
      // data中的数据是需要做响应式处理的(数据一变页面更新)
      // 一个数据不需要响应式效果 无需放data中 直接用即可
      // timer: null // 定时器id
    }
  },
  created() {
    this.getDepartment()
  },
  methods: {
    watch(id) {
      // 用户拥有这个功能权限 才能开放
      // if (!this.$store.state.user.userInfo.roles.points.includes('WATCH_EMPLOYEE')) {
      //   this.$message.error('抱歉 当前账号没有此功能权限 请充值')
      //   return
      // }
      this.$router.push(`/employee/detail/${id}`)
    },
    async exportExcel() {
      // 1.调用接口 注意返回的是二进制流数据 需要设置axios的响应类型为blob  不再是json字符串
      const res = await exportEmployee()
      // console.log(res)
      // 2.调用三方库保存成文件即可
      FileSaver.saveAs(res, '员工列表.xlsx')
    },
    search() {
      // 防抖 先关再开定时器
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        // 完成搜索
        this.queryParams.page = 1 // 设置当前页为1
        this.getEmployeeList()
      }, 300)
    },
    handleCurrentChange2(value) {
      console.log(value)// 最新页码 存下来
      this.queryParams.page = value
      this.getEmployeeList()
    },
    async getDepartment() {
      // 递归方法 将列表转化成树形
      // let result = await getDepartment()
      this.depts = transformListToTree(await getDepartment(), 0) // 传智教育的父部门id是0
      // 数据depts给到el-tree后 是立即渲染的么???  不是的 是异步 等会渲染完成的
      this.queryParams.departmentId = this.depts[0].id// 将传智教育的部门id存下来 后续请求数据

      // 页面高亮传智教育的部门
      // 两个坑: 1.文档有 必须配属性  2.必须等树渲染完成
      await this.$nextTick()
      // 树还没准备好 所以设置不了选中
      this.$refs.tree.setCurrentKey(this.queryParams.departmentId) // 设置某个节点的当前选中状态

      // 至少得拿到传智教育的id
      this.getEmployeeList()
    },
    // 切换部门
    handleCurrentChange(obj) {
      // 重置页码
      this.queryParams.page = 1
      // console.log(obj)
      this.queryParams.departmentId = obj.id // 记录选中部门的id
      this.getEmployeeList() // 重新获取员工列表
    },
    // 获取员工列表的方法
    async getEmployeeList() {
      const { rows, total } = await getEmployeeList(this.queryParams)
      this.total = total
      this.list = rows
    }
  }
}
</script>

<style lang="scss" scoped>
.pic {
  width: 60px;
  height: 60px;
  background-color: #8df;
  border-radius: 50%;
  font-size: 30px;
  color: #fff;
  line-height: 60px;
  text-align: center;
}
.app-container {
  background: #fff;
  display: flex;
  .left {
    width: 280px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }
  .right {
    flex: 1;
    padding: 20px;
    .opeate-tools {
      margin:10px ;
    }
    .username {
      height: 30px;
      width: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      background: #04C9BE;
      font-size: 12px;
      display:inline-block;
    }
  }
}

</style>

